﻿<!DOCTYPE html>
<html>
    <head>
        <title>3种常用网站图片轮播切换代码 - 站长素材</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css"/>

        <!--Luara样式文件-->
        <!--渐隐样式-->
        <link rel="stylesheet" href="css/luara.css"/>
        <!--左滑样式-->
        <link rel="stylesheet" href="css/luara.left.css"/>
        <!--上滑样式-->
        <link rel="stylesheet" href="css/luara.top.css"/>

    </head>
    <body>
        <script src="js/jquery-1.8.3.min.js"></script>
        <!--Luara js文件-->
        <script src="js/jquery.luara.0.0.1.min.js"></script>

        <h5>渐隐</h5>
        <hr/>
        <!--Luara图片切换骨架begin-->
        <div class="example">
            <ul>
                <li><img src="images/1.jpg" alt="1"/></li>
                <li><img src="images/2.jpg" alt="2"/></li>
                <li><img src="images/3.jpg" alt="3"/></li>
                <li><img src="images/4.jpg" alt="4"/></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <!--Luara图片切换骨架end-->
        <script>
            $(function () {
<!--调用Luara示例-->
            $(".example").luara({width: "500", height: "334", interval: 4000, selected: "selete
            d"});
            });
        </scrip        t>
        
            <h5>
                上滑 < /        h5>
            <h        r/>
        <!--Luara图片切换骨架begin        -->
                <div class="example            1">
<                ul>
            <li><img src="images/1.jpg" alt="1"/></                li>
            <li><img src="images/2.jpg" alt="2"/></                li>
    <li><img src="images/3.jpg" alt="3"/></                li>
    <li><img src="images/4.jpg" alt="4"/></            li>
        </            ul>
            <                ol>
        <li></                li>
        <li></                li>
            <li></                li>
            <li></            li>
                </        ol>
            </d        iv>
        <!--Luara图片切换骨架end        -->
        <            script>
                $(functi    on () {
            <!--调用Lua                ra示例-->
                                $(".example1").luara({width: "500", height: "334", interval: 5000, se            lected: "seleted", d        eriction: "t            op"}        );

                                });
                </sc                    ript>


                                <h5            >            左滑</h5>
                         <hr/>
                                <!--Luara图片切换骨                架b            egin-->
                                <div class="exa                      mple2">
                                    <ul>
                                <li><img src="images/1.jpg" alt="1"                        /></li>
                        <l                i><img src="images/2.jpg" alt="2"                             /></li>
                                               <li><img src="images/3.jp                            g" alt="3"                    /></li>
                                <li><i                                mg src="images/4.jpg" alt="4"                                         /></li>
                                              </ul>
                                    <ol>
                                <l                    i></li>
                                            <l                    i>                                </li>
                                                  <l                    i></li>
                                                    <l                i></li>
                                    </ol>
                                                        </div>
                                                                                    <!-                                -Luara图片                                切换骨            架end-->
                                                        <                script>
                                                        $(functi        on () {
                                                        <!--调用Lua                    ra示例-->
                                                        $(".example2").luara({width: "500", height: "334", interval: 4500, selected: "seleted", deriction: "le                ft"});

                                                        });
                                                        </                script>
                                                        <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft Ya                    Hei';">
                                                            <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之                    窗. </p>
                                                            <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材<                /a></p>            
                                                        </div>
                                                        </body>
                                                        </html>